<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>报名</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-size: 14px;
        line-height: 1.5;
        width: auto;
      }
      /*导航栏*/
      ul {
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
        overflow: hidden;
        background-color: cornflowerblue;
        position: fixed;
        top: 0;
        width: 100%;
      }
      li {
        float: left;
      }
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover:not(.active) {
        background-color: whitesmoke;
      }
      .active {
        background-color: white;
      }
      input {
        outline: none;
      }
      #content {
        width: 100%;
        height: 750px;
      }
      #content #aside1 {
        float: left;
        width: 32%;
        height: 740px;
        background-color: white;
      }
      #content #main {
        float: left;
        border-radius: 25px;
        border: 2px solid black;
        box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
        width: 35%;
        margin-top: 60px;
        padding: 20px;
        height: 740px;
      }
      #content #main .ip,
      span {
        height: 32px;
        border-width: 50px;
        margin: 5px;
        line-height: 1.5;
        padding: 4px 7px;
        font-size: 12px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        background-image: none;
      }
      #content #main .op {
        display: inline-block;
        width: 100%;
        line-height: 1.5;
        padding: 4px 7px;
        font-size: 12px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        color: #515a6e;
        background-color: #fff;
        background-image: none;
        position: relative;
        cursor: text;
      }

      #content #main select span {
        display: block;
        padding: 5px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 24px;
      }
      #content #aside2 {
        float: left;
        width: 32%;
        height: 740px;
        background-color: white;
      }
      #footer {
        margin-top: 60px;
        padding: 20px 0 30px;
        line-height: 30px;
        text-align: center;
        color: #737573;
        border-top: 1px solid #e2e2e2;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <ul>
        <li><a href="#home">BluemSun</a></li>
        <li style="float: right">
          <img src="关于我们.png" width="50px" height="40px" />
        </li>
        <li style="float: right"><a href="#news">新闻区</a></li>
        <li style="float: right"><a href="#博客">博客区</a></li>
        <li style="float: right">
          <a class="报名Hot" href="#news">报名hot</a>
        </li>
      </ul>
    </div>
    <div id="content">
      <div id="aside1"></div>
      <div id="main" style="text-align: center">
        <table>
          <span>姓名：</span
          ><input
            class="ip"
            type="text"
            name="userName"
            placeholder="输入姓名"
          />
          <br />
          <span>学号：</span
          ><input
            class="ip"
            type="text"
            name="Student id"
            placeholder="输入学号"
          />
          <br />
          <span>手机：</span
          ><input
            class="ip"
            type="text"
            name="Moble Phone Number"
            placeholder="输入手机号（用于及时公布面试结果）"
          />
          <br />
          <span>QQ: </span>
          <input
            class="ip"
            type="text"
            name="QQ Number"
            placeholder="输入QQ号码"
          />
          <br />
          <span>邮箱：</span
          ><input
            class="ip"
            type="text"
            name="email"
            placeholder="输入QQ邮箱"
          />
          <br />
          <span>寝室：</span
          ><input
            class="ip"
            type="text"
            name="Sroom"
            placeholder="用于及时发送物件"
          />
          <br /><br />
          <hr />
          <br />
          男<input type="radio" value="boy" name="gender" checked="checked" />
          女<input type="radio" value="girl" name="gender" /><br />
          <select>
            <span aria-placeholder="选择专业">选择专业</span>
            <option class="op">计算机大类</option>
            <option class="op">教育技术</option>
            <option class="op">中美</option>
            <option class="op">智能</option>
            <option class="op">美术</option>
            <option class="op">物理</option>
            <option class="op">传媒</option>
            <option class="op">数学</option>
            <option class="op">其他</option>
          </select>
          <br />
          <select>
            <span>选择年级</span>
            <option class="op">2016级</option>
            <option class="op">2017级</option>
            <option class="op">2018级</option>
            <option class="op">2019级</option>
            <option class="op">2020级</option>
            <option class="op">2021级</option>
            <option class="op">2022级</option>
            <option class="op">2023级</option>
            <option class="op">2024级</option></select
          ><br />
          <select>
            <span>选择要面试的岗位</span>
            <option class="op">前端</option>
            <option class="op">后端</option>
            <option class="op">设计</option></select
          ><br />
          <select placeholder="选择你的年龄">
            <span></span>
            <option class="op">16周岁</option>
            <option class="op">17周岁</option>
            <option class="op">18周岁</option>
            <option class="op">19周岁</option>
            <option class="op">20周岁</option>
            <option class="op">21周岁</option>
            <option class="op">22周岁</option>
            <option class="op">23周岁</option>
            <option class="op">24周岁</option>
            <option class="op">25周岁</option></select
          ><br />
          <br />
          <hr />
          <br />

          个人简介：<br />
          <textarea class="op" cols="50" rows="4">
提示：可以讲一个人生中最重要的时刻~</textarea
          ><br />
          掌握技能：<br />
          <textarea class="op" cols="50" rows="4">写专业技能哦~</textarea
          ><br />
          <bsr />
          <input type="submit" value="提交" name="submit" />
        </table>
      </div>
      <div id="aside2"></div>
    </div>
    <br /><br />

    <div id="footer">
      <p>BluemSun 工作室 2018</p>
      <p>管理部 前端技术部 后端技术部 设计部</p>
      <p>吉ICP备19001068号-1</p>
      <img
        height="30px"
        width="30px"
        src=""
        alt="蓝旭图标"
      />
      东北师范大学蓝旭工作室
    </div>
  </body>
</html>
